<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { createCountDown } from "@/utils/timer";
import { mini_pay_api } from "@/package/activity/api/pin_order";
import { requestPayment } from "@/utils/payment";
import { numToMinute } from "@/utils/number";
import { Storage } from "@/utils/database";
import { Toast } from "@/utils/toast";

import OrderSettleBar from "./components/order-settle-bar.vue";
import DetailPriceItem from "./components/detail-price-item.vue";
import PopupBottom from "@/components/popup/bottom.vue";

onLoad((options) => {
  infoData.type = options?.type || "1";

  if (infoData.type === "0") {
    countDown.start();

    const data = Storage.getSync("temp-dypt-data");
    infoData.price = data.price;
    infoData.adult_allot_price = data.adult_allot_price;
    infoData.is_include_ticket = data.is_include_ticket;
    infoData.adult_ticket_price = data.adult_ticket_price;
    infoData.adult_num = data.adult_num;
    infoData.child_allot_price = data.child_allot_price;
    infoData.is_include_child_ticket = data.is_include_child_ticket;
    infoData.child_ticket_price = data.child_ticket_price;
    infoData.child_num = data.child_num;
    infoData.old_allot_price = data.old_allot_price;
    infoData.is_include_old_ticket = data.is_include_old_ticket;
    infoData.old_ticket_price = data.old_ticket_price;
    infoData.old_num = data.old_num;
    tempData.id = data.id;
  }
});
onUnload(() => {
  Storage.deleteSync("temp-dypt-data");
  countDown.stop();
});

const infoData = reactive({
  type: "1",
  price: "",
  adult_allot_price: "",
  is_include_ticket: 0,
  adult_ticket_price: "",
  adult_num: 1,
  child_allot_price: "",
  is_include_child_ticket: 0,
  child_ticket_price: "",
  child_num: 0,
  old_allot_price: "",
  is_include_old_ticket: 0,
  old_ticket_price: "",
  old_num: 0,
});

const countDown = createCountDown(899, (e) => {
  countDownData.text = numToMinute(e.count);
  if (e.isFinish) infoData.type = "2";
});
const countDownData = reactive({ text: "" });

const detailVisible = ref(false);

const btnClick = (type: "detail") => {
  if (type === "detail") {
    detailVisible.value = !detailVisible.value;
  } else {
    Toast.showLoading();
    mini_pay_api({ order_id: tempData.id })
      .then((resp) => {
        Toast.hideLoading();
        requestPayment(resp, () => {
          infoData.type = "1";
        });
      })
      .catch(() => Toast.hideLoading());
  }
};

const tempData = { id: "" };
</script>

<template>
  <image
    class="result-logo"
    :src="
      infoData.type === '1'
        ? '/package/activity/static/dypt-result-state.png'
        : infoData.type === '0'
        ? '/package/activity/static/dypt-result-state2.png'
        : '/package/activity/static/dypt-result-state3.png'
    "
  />
  <view class="result-title">
    {{
      infoData.type === "1"
        ? "支付成功"
        : infoData.type === "0"
        ? "等待付款"
        : "交易关闭"
    }}
  </view>

  <template v-if="infoData.type === '0'">
    <view class="result-desc">
      <view>
        订单将在<text style="color: #ff7900">{{ countDownData.text }}</text>
      </view>
      <view>后自动关闭，请尽快支付</view>
    </view>

    <PopupBottom v-model="detailVisible" title="金额明细" :zIndex="8">
      <view class="result-detail">
        <view class="result-detail-item">
          <view style="flex-grow: 1; min-width: 0">
            <DetailPriceItem
              isRequired
              :info="{
                title: '成人',
                price: infoData.adult_allot_price,
                desc: '18周岁(含)~59周岁(含)',
                ticket:
                  infoData.is_include_ticket === 1
                    ? `含门票￥${infoData.adult_ticket_price}/人`
                    : '',
              }"
            />
          </view>
          <view class="result-detail-num">
            <text class="result-detail-num2">x</text>{{ infoData.adult_num }}
          </view>
        </view>
        <view class="result-detail-line"></view>
        <view class="result-detail-item">
          <view style="flex-grow: 1; min-width: 0">
            <DetailPriceItem
              isRequired
              :info="{
                title: '儿童',
                price: infoData.child_allot_price,
                desc: '17周岁(含)以下',
                ticket:
                  infoData.is_include_child_ticket === 1
                    ? `含门票￥${infoData.child_ticket_price}/人`
                    : '',
              }"
            />
          </view>
          <view class="result-detail-num">
            <text class="result-detail-num2">x</text>{{ infoData.child_num }}
          </view>
        </view>
        <view class="result-detail-line"></view>
        <view class="result-detail-item">
          <view style="flex-grow: 1; min-width: 0">
            <DetailPriceItem
              isRequired
              :info="{
                title: '老人',
                price: infoData.old_allot_price,
                desc: '60周岁(含)以上',
                ticket:
                  infoData.is_include_old_ticket === 1
                    ? `含门票￥${infoData.old_ticket_price}/人`
                    : '',
              }"
            />
          </view>
          <view class="result-detail-num">
            <text class="result-detail-num2">x</text>{{ infoData.old_num }}
          </view>
        </view>
      </view>
    </PopupBottom>
    <view class="result-fixed">
      <OrderSettleBar
        :price="infoData.price"
        btnText="去支付"
        @btn-click="btnClick"
      />
    </view>
  </template>
</template>

<style lang="scss">
page {
  padding-top: 200rpx;
}

.result-logo {
  display: block;
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 40rpx;
}

.result-title {
  margin-bottom: 20rpx;
  font-size: 36rpx;
  color: #2d2d2d;
  line-height: 50rpx;
  text-align: center;
  font-weight: bold;
}

.result-desc {
  font-size: 30rpx;
  color: #666666;
  line-height: 42rpx;
  text-align: center;
}

.result-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 104rpx;
  padding-top: 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  z-index: 8;
}

.result-detail {
  padding: 60rpx;
  border-bottom: 122rpx solid #eeeeee;

  .result-detail-item {
    display: flex;
    align-items: flex-start;
  }

  .result-detail-num {
    flex-shrink: 0;
    margin-left: 20rpx;
    margin-top: 8rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
  }

  .result-detail-num2 {
    font-size: 24rpx;
    line-height: 34rpx;
  }

  .result-detail-line {
    margin-top: 28rpx;
    margin-bottom: 18rpx;
    border-bottom: 2rpx solid #eeeeee;
  }
}
</style>